<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加范本</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../style/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../style/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../style/animate.min.css" rel="stylesheet">
    <link href="../style/summernote.css" rel="stylesheet">
    <link href="../style/summernote-bs3.css" rel="stylesheet">
    <link href="../style/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="../style/sweetalert.css" rel="stylesheet">
    <link href="../style/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="../js/env.js"></script>
    <script src="../js/jquery.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }
        .bannerList{
            clear: both;
            overflow: hidden;
        }
        .bannerList .li{
            float: left;
            width: 200px;
            height: 100px;
            position: relative;
            margin-left: 20px;
            cursor: pointer;
        }
        .bannerList .icon{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            background-color: rgba(0,0,0,0.7);
            display: none;
        }
        .bannerList .icon span{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 20px;
            height: 20px;
            background: url("/static/img/delete.png") no-repeat;
            background-size: 100% 100%;

        }
        .bannerList .li:hover .icon{
            display: block;
        }
        .bannerList img{
            width: 200px;
            display: inline-block;
            height: 100px;
        }
        .bannerBtn{
            clear: both;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="formHandle">
    <form id="formHand" style="display: none">
        <input name="contractId">
        <input name="modelName">
        <input name="srcId">
        <textarea name="content"></textarea>
    </form>
    <div class="row" style="margin: 10px">
        <a href="modelList.html">文章管理</a>>><span>新增</span>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="form-group col-sm-3">
                <label>文章标题：</label>
                <input id="modelName" class="form-control"/>
            </div>
            <div id="type1" class="form-group col-sm-2">
                <label>作者：</label>
                <input class="form-control" id="author">
            </div>
            <div class="form-group col-sm-2">
                <label>地区：</label>
                <select id="srcId" class="form-control">

                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="form-group col-sm-3">
                <!-- todo 上传按钮 POST请求url：localhost:8084/file/upload  参数名：file -->
                <form id="formTag1" enctype="multipart/form-data">
                    <div class="uploadImgBtn" id="uploadImgBtn">
                        <input class="uploadImg" type="file" name="file" id="file1">
                    </div>
                </form>
                <!-- 后台交互 项目启动访问地址：http://localhost:8084/static/page/introduce.html -->
            </div>
            <div class="form-group bannerList">
                <!-- todo 上传回显 最多六张 支持删除input -->

            </div>
<!--            <div class="bannerBtn">-->
<!--                <button onclick="bannerSubmit()">确认轮播图</button>-->
<!--            </div>-->
        </div>
    </div>
    <div class="row">
        <!--<div class="col-sm-2"></div>-->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>范本内容</h5>
                </div>
                <div class="ibox-content">
                    <div class="summernote" style="padding: 120px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-12" style="text-align: center">
            <input type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg"
                   onclick="showContent()" value="预览"/>
            <input id="submit" type="button" onclick="bannerSubmit()" class="btn btn-primary" value="提交" style="margin-left: 6%"/>
        </div>
    </div>

</div>
<div id="loading" class="ibox"
     style="margin: 0px;height: 100%;width: 100%;position: absolute; top:0px;background-color: black; opacity: 0.4;display: none">
    <div class="ibox-content"
         style="position: relative; height: 100%;width: 100%;background-color: black;padding-top: -10px">
        <div class="spiner-example" style="position: relative;top:30%">
            <div class="sk-spinner sk-spinner-rotating-plane"></div>
        </div>
    </div>
</div>

<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../js/summernote.min.js"></script>
<script src="../js/summernote-zh-CN.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/sweetalert.min.js"></script>
<script>
    var bannerLIst = "";
    var regionId = "";
    $(function () {
        regionId
        getList();
        $('.summernote').summernote({
             onImageUpload: function(files) {
                    sendFile(files);
                },
            lang: 'zh-CN',
            focus: true,
            height: 433,
            callbacks: {
                onImageUpload: function(files) {
                    sendFile(files);
                },
                onPaste: function (ne) {
                    var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text/plain');
                    //    ne.preventDefault();
                    ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
                    // Firefox fix
                    setTimeout(function () {
                        document.execCommand("insertText", false, bufferText);
                    }, 10);
                }
            }
        });
        $(".note-editor .dropdown-menu li")[8].remove();
        $(".note-editor .dropdown-menu li")[5].remove();
        $(".note-editor .dropdown-menu li")[3].remove();
        $(".note-editor .dropdown-menu li")[2].remove();
        $(".note-editor .dropdown-menu li")[1].remove();
        $("#file1").on("change", upload );
    });
    function upload(){
        //如果不理解我写的，可以看看我的前几篇文章
        var t = Math.random();
        $.ajax({
            url: requestUrl+"/file/upload?t="+t,
            type: "post",
            dataType: "json",
            cache: false,
            data: new FormData($("#formTag1")[0]),
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            success: function(data){
                if(data.success){
                    var len = bannerLIst.split(',').length;
                    $(".bannerList").append('<div class="li" onclick="remove(this,'+len+')"><img title="点击移除" src="'+data.result+'"></div>');
                    bannerLIst += data.result+",";
                }
            }
        })
    }
    function remove(tar,len) {
        $(tar).remove();
        console.log(len);
    }
    function bannerSubmit() {
        var author = $("#author").val();
        var title = $("#modelName").val();
        var content = $(".note-editable").html();
        $("#contentModel").modal('show');
        $.ajax({
            url: requestUrl+"/introduce/save",
            async: true,
            type:"post",
            data:{
                imagesStr:bannerLIst,
                title:title,
                author:author,
                regionId:regionId,
                content:content,
            },
            success: function (data) {
                $("#contentModel").modal('hide');
                if(data==true){
                    swal({title: "操作成功", text: "新增文章成功", type: "success", closeOnConfirm: false});
                }else{
                    swal({title: "操作失败", text: data.message, type: "error", closeOnConfirm: false});
                }
            },
            error: function () {

            }
        });
    }
    function sendFile(files) {
        var $files = $(files);
        $files.each(function() {
            var file = this;
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: requestUrl+"/file/upload",
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (data) {//data是返回的hash,key之类的值，key是定义的文件名
                    var imgNode = document.createElement("img");
                    imgNode.src =data.result;
                    $(".note-editable").append('<img src="'+data.result+'">');
                    $('.summernote').summernote('insertNode', imgNode);
                },
                error: function () {
                    alert("上传失败");
                }
            });
        });

    }

    var edit = function () {
        $("#eg").addClass("no-padding");
        $(".click2edit").summernote({lang: "zh-CN", focus: true})
    };
    var save = function () {
        $("#eg").removeClass("no-padding");
        var aHTML = $(".click2edit").code();
        $(".click2edit").destroy()
    };
    function showContent(id) {
        $("#contentModel .modal-content").html($(".note-editable").html());
    }
    function getList() {
        $.ajax({
            url: requestUrl+"/introduce/regions",
            async: false,
            success: function (data) {
                if(data.success){
                    var arr = '<option value="-1">请选择</option>';
                    for(var i = 0;i < data.result.length;i++){
                        arr += '<option value="'+data.result[i].id+'">'+data.result[i].name+'</option>'
                    }
                    $("#srcId").html(arr);
                }
            },
            error: function () {

            }
        });
    }
    $("#srcId").change(function(){
        regionId = $(this).val()
    })
</script>
<div id="contentModel" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="margin-bottom: 0;padding: 0">
        <div class="modal-content" style="height: 760px; width: 900px;padding: 60px;margin-left: -25%; overflow: auto">

        </div>
    </div>
</div>
</body>
</html>